<!-- 核心思路：
1.基于数据动态渲染tab → v-for
2.准备下标记录高亮的是哪一个tab → activeIndex
3．基于下标，动态控制class 类名 -> v-bind:class
所谓切换高亮，就是该下标 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        display: flex;
        border-bottom: 2px solid #e01222;
        padding: 0 10px;
    }

    li {
        width: 100px;
        height: 50px;
        line-height: 50px;
        list-style: none;
        text-align: center;
    }

    li a {
        display: block;
        text-decoration: none;
        font-weight: bold;
        color: #333333;
    }

    li a.active {
        background-color: #e01222;
        color: #fff;
    }
</style>
<div id="app">
    <ul>
        <li v-for="(item,index) in list" :key="item.id" @click="activeIndex = index">
            <a href="#" :class="{active:index === activeIndex}">{{item.name}}</a>
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            activeIndex: 0,
            list: [
                { id: 1, name: '京东秒杀' },
                { id: 2, name: '每日特价' },
                { id: 3, name: '品类秒杀' },
            ]
        },
        methods: {

        }
    })
</script>